<template>
	<view class="rate-main">
		<template v-for="(item, index) in count">
			<view class="star" :style="{ 'margin-right': gutter + 'rpx' }">
				<image
					@click="checkItem(index + 1)"
					class="rate-image"
					:key="index"
					:style="{ width: size + 'rpx', height: size + 'rpx' }"
					:src="checkedVal < index + 1 ? defImgSrc : selImgSrc"
				></image>
				<view class="level" v-if="level.length">{{ level[index] }}</view>
			</view>
		</template>
	</view>
</template>

<script>
export default {
	name: 'rate',
	props: {
		value: {
			//受控分值
			type: Number,
			default: 0
		},
		count: {
			//数量
			type: Number,
			default: 5
		},
		size: {
			//图标大小
			type: Number,
			default: 82
		},
		gutter: {
			//图标间距
			type: Number,
			default: 20
		},
		type: {
			//内置类型
			type: Number,
			default: 0
		},
		disHref: {
			//自定义默认图片
			type: String,
			default: '/static/images/icon/rate1_0.png'
		},
		checkedHref: {
			//自定义选中图片
			type: String,
			default: '/static/images/icon/rate1_1.png'
		},
		readonly: {
			//是否只读
			type: Boolean,
			default: false
		},
		level: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			ImgData: ['/static/icon/rate1_0.png'],
			defImgSrc: '',
			selImgSrc: '',
			checkedVal: 0
		};
	},
	mounted: function() {
		this.$nextTick(function() {
			this.checkedVal = this.value;
			this.defImgSrc = this.disHref;
			this.selImgSrc = this.checkedHref;
		});
	},
	watch: {
		value(val, oldVal) {
			this.checkedVal = this.value;
		}
	},
	methods: {
		checkItem(index) {
			if (!this.readonly) {
				this.checkedVal = index;
				this.$emit('input', index);
				this.$emit('change', index);
			}
		}
	}
};
</script>

<style lang="scss">
.rate-main {
	display: inline-flex;
}

.star {
	text-align: center;

	.level {
		font-size: 22rpx;
		color: #666666;
	}
}

.rate-image {
	vertical-align: text-top;
}
</style>
